<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分销员推广</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .promotion-card {
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
        }
        .promotion-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .status-active {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .status-pending {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }
        .status-expired {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }
        .qr-code {
            background: #fff;
            border: 2px solid #e5e7eb;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-4 py-2 bg-black text-white text-sm">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-three-quarters"></i>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-4 py-6">
        <!-- 头部 -->
        <div class="flex items-center justify-between mb-6">
            <button class="text-white" onclick="history.back()">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-bold text-white">分销员推广</h1>
            <button class="text-white" onclick="createPromotion()">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>

        <!-- 推广统计 -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-white">156</div>
                <div class="text-white text-opacity-80 text-sm">总推广次数</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-green-300">89</div>
                <div class="text-white text-opacity-80 text-sm">成功转化</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-blue-300">¥12,580</div>
                <div class="text-white text-opacity-80 text-sm">推广收益</div>
            </div>
            <div class="glass-card rounded-xl p-4 text-center">
                <div class="text-2xl font-bold text-yellow-300">57%</div>
                <div class="text-white text-opacity-80 text-sm">转化率</div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="grid grid-cols-3 gap-3 mb-6">
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="shareProduct()">
                <i class="fas fa-share-alt text-2xl mb-2"></i>
                <div class="text-sm">分享产品</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="generateQR()">
                <i class="fas fa-qrcode text-2xl mb-2"></i>
                <div class="text-sm">生成二维码</div>
            </button>
            <button class="glass-card rounded-xl p-3 text-center text-white" onclick="viewMaterials()">
                <i class="fas fa-images text-2xl mb-2"></i>
                <div class="text-sm">推广素材</div>
            </button>
        </div>

        <!-- 推广活动列表 -->
        <div class="mb-4">
            <h2 class="text-lg font-bold text-white mb-3">我的推广活动</h2>
            
            <!-- 筛选按钮 -->
            <div class="flex space-x-2 mb-4">
                <button class="px-4 py-2 bg-white text-purple-600 rounded-full text-sm font-medium" onclick="filterPromotions('all')">全部</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPromotions('active')">进行中</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPromotions('pending')">待审核</button>
                <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm" onclick="filterPromotions('expired')">已结束</button>
            </div>
        </div>

        <!-- 推广活动卡片 -->
        <div class="space-y-4" id="promotionList">
            <!-- 进行中的推广 -->
            <div class="promotion-card rounded-xl p-4" data-status="active">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/60x60/4F46E5/FFFFFF?text=九寨沟" alt="九寨沟三日游" class="w-15 h-15 rounded-lg mr-3">
                        <div>
                            <div class="font-semibold text-gray-800">九寨沟三日游</div>
                            <div class="text-sm text-gray-500">推广佣金: 15%</div>
                        </div>
                    </div>
                    <div class="status-active text-white px-3 py-1 rounded-full text-xs font-medium">
                        进行中
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-3">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">45</div>
                        <div class="text-xs text-gray-500">浏览量</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">12</div>
                        <div class="text-xs text-gray-500">转化数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">¥1,680</div>
                        <div class="text-xs text-gray-500">预计收益</div>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="sharePromotion('九寨沟三日游')">
                        <i class="fas fa-share mr-1"></i>分享
                    </button>
                    <button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm" onclick="viewStats('九寨沟三日游')">
                        <i class="fas fa-chart-line mr-1"></i>数据
                    </button>
                    <button class="flex-1 bg-purple-500 text-white py-2 rounded-lg text-sm" onclick="editPromotion('九寨沟三日游')">
                        <i class="fas fa-edit mr-1"></i>编辑
                    </button>
                </div>
            </div>

            <!-- 待审核的推广 -->
            <div class="promotion-card rounded-xl p-4" data-status="pending">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/60x60/059669/FFFFFF?text=张家界" alt="张家界四日游" class="w-15 h-15 rounded-lg mr-3">
                        <div>
                            <div class="font-semibold text-gray-800">张家界四日游</div>
                            <div class="text-sm text-gray-500">推广佣金: 18%</div>
                        </div>
                    </div>
                    <div class="status-pending text-white px-3 py-1 rounded-full text-xs font-medium">
                        待审核
                    </div>
                </div>
                
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-3">
                    <div class="flex items-center text-yellow-800">
                        <i class="fas fa-clock mr-2"></i>
                        <span class="text-sm">推广申请正在审核中，预计1-2个工作日完成</span>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-gray-400 text-white py-2 rounded-lg text-sm" disabled>
                        <i class="fas fa-hourglass-half mr-1"></i>等待审核
                    </button>
                    <button class="flex-1 bg-red-500 text-white py-2 rounded-lg text-sm" onclick="cancelPromotion('张家界四日游')">
                        <i class="fas fa-times mr-1"></i>取消申请
                    </button>
                </div>
            </div>

            <!-- 已结束的推广 -->
            <div class="promotion-card rounded-xl p-4" data-status="expired">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/60x60/DC2626/FFFFFF?text=黄山" alt="黄山二日游" class="w-15 h-15 rounded-lg mr-3">
                        <div>
                            <div class="font-semibold text-gray-800">黄山二日游</div>
                            <div class="text-sm text-gray-500">推广佣金: 12%</div>
                        </div>
                    </div>
                    <div class="status-expired text-white px-3 py-1 rounded-full text-xs font-medium">
                        已结束
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mb-3">
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">128</div>
                        <div class="text-xs text-gray-500">总浏览量</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">23</div>
                        <div class="text-xs text-gray-500">总转化数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-gray-800">¥2,760</div>
                        <div class="text-xs text-gray-500">总收益</div>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg text-sm" onclick="viewFinalStats('黄山二日游')">
                        <i class="fas fa-chart-bar mr-1"></i>最终报告
                    </button>
                    <button class="flex-1 bg-green-500 text-white py-2 rounded-lg text-sm" onclick="reapplyPromotion('黄山二日游')">
                        <i class="fas fa-redo mr-1"></i>重新申请
                    </button>
                </div>
            </div>
        </div>

        <!-- 推广技巧 -->
        <div class="mt-6">
            <h2 class="text-lg font-bold text-white mb-3">推广技巧</h2>
            <div class="glass-card rounded-xl p-4">
                <div class="space-y-3 text-white text-sm">
                    <div class="flex items-center">
                        <i class="fas fa-lightbulb text-yellow-300 mr-3"></i>
                        <span>选择热门时段发布，提高曝光率</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-users text-blue-300 mr-3"></i>
                        <span>针对目标群体精准推广</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-heart text-red-300 mr-3"></i>
                        <span>分享真实体验，增加可信度</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-gift text-green-300 mr-3"></i>
                        <span>结合优惠活动，提升转化率</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 浮动操作按钮 -->
        <div class="fixed bottom-20 right-4">
            <button class="w-14 h-14 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-full shadow-lg" onclick="quickShare()">
                <i class="fas fa-share-alt"></i>
            </button>
        </div>
    </div>

    <script>
        /**
         * 筛选推广活动
         * @param {string} status - 活动状态
         */
        function filterPromotions(status) {
            // 更新按钮状态
            document.querySelectorAll('button').forEach(btn => {
                if (btn.textContent.includes('全部') || btn.textContent.includes('进行中') || 
                    btn.textContent.includes('待审核') || btn.textContent.includes('已结束')) {
                    btn.classList.remove('bg-white', 'text-purple-600');
                    btn.classList.add('bg-white', 'bg-opacity-20', 'text-white');
                }
            });
            
            event.target.classList.remove('bg-white', 'bg-opacity-20', 'text-white');
            event.target.classList.add('bg-white', 'text-purple-600');
            
            // 筛选推广活动
            const promotions = document.querySelectorAll('.promotion-card');
            promotions.forEach(promotion => {
                if (status === 'all') {
                    promotion.style.display = 'block';
                } else {
                    const promotionStatus = promotion.getAttribute('data-status');
                    promotion.style.display = promotionStatus === status ? 'block' : 'none';
                }
            });
        }
        
        /**
         * 分享产品
         */
        function shareProduct() {
            alert('选择要分享的产品');
            // 实际项目中打开产品选择页面
        }
        
        /**
         * 生成二维码
         */
        function generateQR() {
            alert('生成推广二维码');
            // 实际项目中生成二维码
        }
        
        /**
         * 查看推广素材
         */
        function viewMaterials() {
            alert('查看推广素材库');
            // 实际项目中打开素材库
        }
        
        /**
         * 创建新推广
         */
        function createPromotion() {
            alert('创建新的推广活动');
            // 实际项目中打开创建推广表单
        }
        
        /**
         * 分享推广
         * @param {string} productName - 产品名称
         */
        function sharePromotion(productName) {
            const shareOptions = [
                '微信好友',
                '微信朋友圈',
                'QQ空间',
                '微博',
                '复制链接'
            ];
            
            const option = prompt(`选择分享方式 (${productName}):\n\n${shareOptions.map((opt, idx) => `${idx + 1}. ${opt}`).join('\n')}\n\n请输入数字 (1-5):`);
            
            if (option && option >= 1 && option <= 5) {
                alert(`正在分享到 ${shareOptions[option - 1]}`);
            }
        }
        
        /**
         * 查看推广数据
         * @param {string} productName - 产品名称
         */
        function viewStats(productName) {
            alert(`查看 ${productName} 的推广数据详情`);
            // 实际项目中跳转到数据分析页面
        }
        
        /**
         * 编辑推广
         * @param {string} productName - 产品名称
         */
        function editPromotion(productName) {
            alert(`编辑 ${productName} 的推广设置`);
            // 实际项目中打开编辑表单
        }
        
        /**
         * 取消推广申请
         * @param {string} productName - 产品名称
         */
        function cancelPromotion(productName) {
            if (confirm(`确定要取消 ${productName} 的推广申请吗？`)) {
                alert('推广申请已取消');
                // 实际项目中调用取消API
            }
        }
        
        /**
         * 查看最终统计报告
         * @param {string} productName - 产品名称
         */
        function viewFinalStats(productName) {
            alert(`查看 ${productName} 的最终推广报告`);
            // 实际项目中打开详细报告页面
        }
        
        /**
         * 重新申请推广
         * @param {string} productName - 产品名称
         */
        function reapplyPromotion(productName) {
            if (confirm(`确定要重新申请推广 ${productName} 吗？`)) {
                alert('重新申请已提交');
                // 实际项目中调用重新申请API
            }
        }
        
        /**
         * 快速分享
         */
        function quickShare() {
            alert('快速分享热门产品');
            // 实际项目中打开快速分享菜单
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            console.log('分销员推广页面加载完成');
            // 可以在这里添加其他初始化逻辑
        });
    </script>
</body>
</html>